<template>
  <div class="log_c">
    <form>
      <table
        border="0"
        style="width: 370px; font-size: 14px; margin-top: 30px"
        cellspacing="0"
        cellpadding="0"
      >
        <tr height="50" valign="top">
          <td width="55">&nbsp;</td>
          <td>
            <span class="fl" style="font-size: 24px">登录</span>
            <span class="fr"
              >还没有商城账号，<a href="javascript:;" style="color: #ff4e00"
                @click="$router.push({name:'Register'})">立即注册</a
              ></span
            >
          </td>
        </tr>
        <tr height="70">
          <td>用户名</td>
          <td><input type="text" value="" class="l_user" v-model="user.loginName" @focus="valid.loginName =''"/></td>
        </tr>
        <tr v-show="!valid.canSubmit">
          <td>&nbsp;</td>
          <td class="errTxt">{{ valid.loginName }}</td>
        </tr>
        <tr height="70">
          <td>密&nbsp; &nbsp; 码</td>
          <td><input type="password" value="" class="l_pwd" v-model="user.password" @focus="valid.password =''"/></td>
        </tr>
        <tr v-show="!valid.canSubmit">
          <td>&nbsp;</td>
          <td class="errTxt">{{ valid.password }}</td>
        </tr>
        <!-- <tr>
          <td>&nbsp;</td>
          <td style="font-size: 12px; padding-top: 20px">
            <span style="font-family: '宋体'" class="fl">
              <label class="r_rad"><input type="checkbox" v-model="user.saveAccount" /></label
              ><label class="r_txt">请保存我这次的登录信息</label>
            </span>
            <span class="fr"
              ><a href="#" style="color: #ff4e00">忘记密码</a></span
            >
          </td>
        </tr> -->
        <tr height="60">
          <td>&nbsp;</td>
          <td><input type="button" @click='submit' value="登录" class="log_btn" /></td>
        </tr>
      </table>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        loginName: '',
        password: '',
        saveAccount: false, 
      },
      valid: {
        canSubmit: '',
        loginName: '',
        password: ''
      },
      sessionStorage: window.sessionStorage
    }
  },
  methods: {
    submit() {
      //校验
      let canSubmit = true;
      if (this.user.loginName === "") {
        this.valid.loginName = "用户登录名不能为空";
        canSubmit = false;
      }
      if (this.user.password === "") {
        this.valid.password = "密码不能为空";
        canSubmit = false;
      }
      if(canSubmit) this.valid.canSubmit = true;
      if(!this.valid.canSubmit) return;
      this.$axios({
          url: "/api/user/login",
          method: 'post',
          data: this.user
      }).then(rs => {
          if(rs.data.code == "5500") {
            this.valid.canSubmit = false;
            this.valid.loginName = (rs.data.loginName || '');
            this.valid.password = (rs.data.password);
            return;
          }
          //登录成功
          //保存登录名和token
          this.sessionStorage.setItem('type', rs.data.type);
          this.sessionStorage.setItem('token', rs.data.token);
          this.sessionStorage.setItem('loginName', rs.data.loginName);
          this.$message.success(`欢迎${rs.data.loginName}`)
          // this.$store.commit('setAuth', {token: rs.data.token, loginName: rs.data.loginName}) //使用时刷新一下sessionStorage中的数据还在，但是store中的state中的数据为null，ai说其是存放在内存中的，刷新就没了
          //跳转
          this.$router.push({
            name: "IndexCenter"
          })
      })
    }
  },
  created() {
    if(this.sessionStorage.getItem("loginName") != null) {
      this.$router.push({name: "IndexCenter"})
    }
  }
};
</script>

<style scope>
.errTxt {
  color: red;
  font-size: 0.8rem;
}
</style>